<template>
  <div class="dialog_info">
    <div class="dialog_info_title">
      <div class=" dialogTab">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == index }"
          class="tabTit"
          @click="handleClick(index)"
        >
          {{ item }}
        </span>
      </div>
      <div v-show="selectNum == 0" class="water-table">
        <FloodAnalysisInfo />
      </div>
      <div v-show="selectNum == 1" class="water-table">
        <div class="zhouDataTable m-t-10 ">
          <el-table
            v-loading="loading"
            :data="VillageDataList.data"
            class="flagTable rainLimitTable"
            style="width: 100%"
            
          >
           <template slot="empty" >
              <div class="noDataLists">暂无数据</div>
           </template>
         
            <el-table-column prop="countyAdnm" align="center" label="县名" />
            <!-- <el-table-column prop="townAdnm" align="center" label="村庄名称" /> -->
            <el-table-column prop="adnm" align="center" label="村庄名称" />
            <el-table-column prop="pCount" align="center" label="人口 " />
            <el-table-column prop="htCount" align="center" label="户数" />
            <el-table-column prop="plarea" align="center" label="防洪能力" />
            <el-table-column prop="userFullName" align="center" label="防汛责任人" />
            <el-table-column prop="parseFloat(len/1000).toFixed(3)" align="center" label="距河道距离(km)" />
            <el-table-column label="预警指标(mm)" align="center">
              <el-table-column prop="drp1H" align="center" label="1h" />
              <el-table-column prop="drp2H" align="center" label="3h" />
              <el-table-column prop="drp3H" align="center" label="6h" />
            </el-table-column>
          </el-table>
          <div class="page-wrap">
            <el-pagination
              background
              :page-sizes="pageInfo.sizeList"
              :current-page="Pageipage"
              :page-size="Pageirows"
              :total="VillageDataList.dataCount"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloodAnalysisInfo from './FloodAnalysisInfo.vue'
import MixinPage from '@/views/components/MixinPage'
import {
    GetProtectionVillageByRvcd,
    GetEarlyWarningProcess
} from '@/api/zyx.js'
export default {
    components: {
        FloodAnalysisInfo
    },
    mixins: [MixinPage],
    data() {
        return {
            selectNum: 0,
            tabTitList: ['洪水分析', '沿河村庄'],
            tabsName: '洪水分析',
            parameter: {},
            VillageDataList: [],
            ProtectionData: [],
            Pageipage: 1,
            Pageirows: 10,
            tab2: false,
            tab3: false,
            loading: false
        }
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.params
        
    },
    methods: {
        handleClick(index) {
            if (Number(index) === 1) {
                if (!this.tab2) {
                    this.GetProtectionVillageByRvcd()
                }
            }
            this.selectNum = index
        },
        GetProtectionVillageByRvcd() {
            this.loading = true
            const params = {
                Rvcd: this.parameter.rvcd,
                page: this.Pageipage,
                limit: this.Pageirows
            }
            GetProtectionVillageByRvcd(params).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.tab2 = true
                    this.VillageDataList = res
                }
            })
        },
        /** 显示条数*/
        handleSizeChange(val) {
            this.Pageirows = val
            this.GetProtectionVillageByRvcd()
        },
        /** 翻页*/
        handleCurrentChange(val) {
            this.Pageipage = val
            this.GetProtectionVillageByRvcd()
        },
        GetEarlyWarningProcess() {
            this.loading = true
            const params = {
                Rvcd: this.parameter.rvcd,
                dtTime: this.parameter.Ftm
            }
            GetEarlyWarningProcess(params).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.tab3 = true
                    this.ProtectionData = res.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
    padding-top: 10px;
    min-height:78vh;
		height: 100%;
    
		.dialog_info_title {
			height: 100%;

			/deep/.water-table {
        height:calc(78vh - 40px);
        max-height: max-content;
        padding:0px 20px;
        box-sizing: border-box;
			}
		}
	}

	

	.zhouDataTable {
		.el-link.el-link--default {
			color: #fff;
		}

		.el-button {
			background-color: #086497;
			border-color: #14275b;
			color: #fff;
			border-radius: 5px;
		}

		.flagTable .el-table__body tr .cell {
			height: 15px;
      line-height: 15px;
      
		}

		/deep/ .flagTable th,
		/deep/ .flagTable th,
		.flagTableDiv {
      color: #00FEFE;
      background: rgba(0, 150, 255, 0.3);
		}
  
		/deep/ .el-table thead.is-group th.el-table__cell {
      background-color:rgba(0, 150, 255, 0.3);
      
      border:none;
    }

		.el-table--border::after {
			background-color: #14275b;
    }
     /deep/ .el-table__body {
      -webkit-border-vertical-spacing: 7px;
    }
    /deep/ .el-table__empty-block{
       height: calc(100% - 7px)!important;
       margin-top:-40px;
    }
  }



  .zhouDataTable{
     height: calc(100% - 20px);
     .noDataLists{
       height: 80px;
       background-position: center center;
       background-size: auto;
       padding-top: 96px;
     }
    
   }
   .flagTable{
     height: calc(100% - 20px);
     padding-bottom:10px;
   }

</style>
